<template>
  <el-col :span="24">
    <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="99px">
      <el-row type="flex" justify="right">
        <el-col :span="5" :offset="2">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="2">
          <el-form-item label="职位" prop="job">
            <el-input v-model="ruleForm.job"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="right">
        <el-col :span="5" :offset="2">
          <el-form-item label="电话" prop="telephone">
            <el-input v-model="ruleForm.telephone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="2">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="right">
        <el-col :span="5" :offset="2">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="ruleForm.sex" clearable placeholder="请选择">
              <el-option
                v-for="i in options"
                :key="i.value"
                :label="i.label"
                :value="i.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="right">
        <el-col :span="6" :offset="3">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-col>
</template>
<script>
  import axios from 'axios'
  export default {
    data() {
      var validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入电话号码'));
        } else {
          if (/^1[35789]\d{9}$/.test(value)) {
            callback();
          } else {
            callback(new Error('请输入正确的格式'));
          }
        }
      };
      return {
        rules: {
          name: [
            {required: true, message: '请输入名字', trigger: 'blur'}
          ],
          telephone: [
            {validator: validatePhone, required: true, trigger: 'change'}
          ],
          sex: [
            {required: true, message: '请选择性别', trigger: 'change'}
          ],
          email: [
            {required: true, message: '请输入邮箱地址', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
          ],
          job: [
            {required: true, message: '请输入职位', trigger: 'change'}
          ]
        },
        options: [
          {
            label: '男',
            value: '0'
          },
          {
            label: '女',
            value: '1'
          }
        ],
        ruleForm: {
          name: '',
          telephone: '',
          sex: '',
          email: '',
          job: ''
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios({
              method: 'get',
              url: `${this.BASE_URL}/user/saves`,
              responseType: 'json',
              params: {
                account: sessionStorage.getItem('username'),
                name: this.ruleForm.name,
                telephone: this.ruleForm.telephone,
                sex: this.ruleForm.sex,
                email: this.ruleForm.email,
                job: this.ruleForm.job
              }
            }).then((response) => {
              this.get()
              this.$message('修改成功')
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      get () {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/user/getOne`,
          responseType: 'json',
          params: {
            account: sessionStorage.getItem('username')
          }
        }).then((response) => {
          var a = response.data.data
          this.ruleForm.name = a.name
          this.ruleForm.telephone = a.telephone
          if (a.sex === true) {
            this.ruleForm.sex = '1'
          } else {
            this.ruleForm.sex = '0'
          }
          this.ruleForm.email = a.email
          this.ruleForm.job = a.job
        }).catch(() => {
          this.loading = false
        })
      }
    },
    mounted () {
      this.get()
    }
  }
</script>
<style scoped>
  .el-select {
    width: 100%;
  }
</style>
